import React, { useContext, useState, useEffect } from "react";
import Avatar from "@material-ui/core/Avatar";
import Button from "@material-ui/core/Button";
import CssBaseline from "@material-ui/core/CssBaseline";
import TextField from "@material-ui/core/TextField";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import Checkbox from "@material-ui/core/Checkbox";
import Link from "@material-ui/core/Link";
import Grid from "@material-ui/core/Grid";
import Box from "@material-ui/core/Box";
import LockOutlined from "@material-ui/icons/LockOutlined";
import Typography from "@material-ui/core/Typography";
import { makeStyles } from "@material-ui/core/styles";
import Container from "@material-ui/core/Container";
// import { Context } from "../store/appContext";
import { useHistory } from "react-router-dom";
import Bg from './bg.jfif';
import { Class } from "@material-ui/icons";


const useStyles = makeStyles(theme => ({
    paper: {
        display: "flex",
        flexDirection: "column",
        alignItems: "center",


    },
    container: {
        minHeight: "100%",
        minWidth: "100%",
        backgroundImage: `url(${Bg})`,
        backgroundSize: "cover",
        backgroundRepeat: "no-no-repeat",
        backgroundPosition: "center",
        padding: '0px',

    },
    innerContainer: {
        // minHeight: "100%",
        // minWidth: "100%",
        // background: 'rgba(255, 255, 255, 0.5)',
    },
    avatar: {
        margin: theme.spacing(1),
        backgroundColor: theme.palette.secondary.main
    },
    form: {
        width: "100%", // Fix IE 11 issue.
        marginTop: theme.spacing(1),

    },
    submit: {
        margin: theme.spacing(3, 0, 2)
    }
}));
export const Login = () => {
    const form: React.RefObject<any> = React.createRef();
    let history = useHistory();
    const classes = useStyles();
    // const { store, actions } = useContext(Context);

    useEffect(() => {
        // let tokenCheck = JSON.parse(localStorage.getItem)("project-man-app");
        // if (tokenCheck !== null) {
        // 	actions.saveToken(tokenCheck); // token is present, so do something (set loggedIn, maybe?)
        // }
    }, []);

    const [formValues, setFormValues] = useState({
        email: "",
        password: "",
        remember: false
    });
    const handleSubmit = (e: any) => {
        e.preventDefault();

        let validity = form.current.reportValidity();
        console.log(validity);
        if (validity) {

            history.push("/menu");

        }
    };

    const handleChange = (e: any) => {
        let key = e.target.name;
        let value;
        if (key !== "remember") {
            value = e.target.value;
        } else {
            value = e.target.checked;
        }
        setFormValues({
            ...formValues,
            [key]: value
        });
    };

    return (
        <Container className={classes.container} component="main">

            <div className={classes.innerContainer}>

                <Container className={classes.paper} style={{ paddingTop: '72px' }}>
                    <CssBaseline />
                    <Typography style={{ textAlign: 'center' }} component="h1" variant="h3" >
                        无人机物流基站辅助选址系统
				    </Typography>
                    <Container maxWidth="xs">
                        <div className={classes.paper} style={{ marginTop: "20px" }}>

                            <Avatar className={classes.avatar}>
                                <LockOutlined />
                            </Avatar>
                            <Typography component="h1" variant="h5">
                                Login to Account
				        </Typography>
                            <form className={classes.form} ref={form} noValidate onSubmit={e => handleSubmit(e)}>
                                <TextField
                                    variant="outlined"
                                    margin="normal"
                                    required
                                    fullWidth
                                    id="user"
                                    label="User Name"
                                    name="user"
                                    autoFocus
                                    onChange={e => handleChange(e)}
                                />
                                <TextField
                                    variant="outlined"
                                    margin="normal"
                                    required
                                    fullWidth
                                    name="password"
                                    label="Password"
                                    type="password"
                                    id="password"
                                    autoComplete="current-password"
                                    onChange={e => handleChange(e)}
                                />

                                <Button type="submit" fullWidth variant="contained" color="primary" className={classes.submit}>
                                    Login
					</Button>
                                <Grid container>
                                    <Grid item xs>
                                        <Link href="#" variant="body2">
                                            Forgot password?
							</Link>
                                    </Grid>
                                    <Grid item>
                                        <Link href="#" variant="body2">
                                            {"Don't have an account? Sign Up now!"}
                                        </Link>
                                    </Grid>
                                </Grid>
                            </form>
                        </div>
                    </Container>
                </Container>
            </div>


        </Container>
    );
};